<template>
	<view class="nav-bar" :style="{height: navBarHeight+'px', paddingTop: statusBarHeight+'px', boxSizing:'border-box'}">
		<view class="nav-content" :style="{height: navBarHeight-statusBarHeight+'px'}">内容区域</view>
	</view>
</template>

<script>
	export default {
		name:"nav-bar",
		data() {
			return {
				statusBarHeight: 0,
				navBarHeight: 0
			};
		},
		methods: {
			clacNavBarHeight(){
				// 获取状态栏高度
				const { statusBarHeight } = uni.getSystemInfoSync();
				// 获取胶囊按钮高度
				console.log(statusBarHeight, 111);
				// #ifdef MP-WEIXIN
				const menuTop = uni.getMenuButtonBoundingClientRect().top;
				const menuHeight = uni.getMenuButtonBoundingClientRect().height;
				const navBarHeight = (menuTop-statusBarHeight)*2 + menuHeight + statusBarHeight;
				// #endif
				
				// #ifdef APP
				const navBarHeight = statusBarHeight + 40;
				// #endif
				this.statusBarHeight = statusBarHeight;
				this.navBarHeight = navBarHeight;
				
				this.$store.commit('setNavBarHeight', navBarHeight);
			}
		},
		mounted(){
			this.clacNavBarHeight()
		}
	}
</script>

<style scoped lang="scss">
.nav-bar{
	background-color: #ff4e8c;
	position: fixed;
	width: 100%;
	left: 0;
	top: 0;
	z-index: 1000;
	.nav-content{
		background-color: #ffbb4c;
	}
}
</style>